<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSX语法规则</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>
<body>
  <div id="test"></div>
  <div id="demo"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    const myId = "helLO"
    const myText = "hello react"
    // 1.创建虚拟DOM
    const VDOM = (
      <div>
        <h2 className="title" id={myId.toLowerCase()}>
          <span style={{color: 'white', fontSize: '35px'}}>{myText}</span>
        </h2>
        <h2 className="title" id={myId.toLowerCase() + '1'}>
          <span style={{color: 'white', fontSize: '35px'}}>{myText}</span>
        </h2>
        <input type="text" />
        <good>23231</good>
      </div>  
      )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    /*
      jsx语法规则：
        1.定义虚拟DOM时，不要写引号
        2.标志中写入js表达式，需要用{}包裹
        3.样式类名指定时不要用class,要用className
        4.内联样式，要用style={{key: value,...,key: value}}的形式去写
        5.虚拟DOM有且仅有一个根标签
        6.标签必须闭合
        7.标签首字母
          （1）若小写字母开头，则将该标签转为html同名标签；若html中无同名标签报错
          （2）若大写字母开头，react就渲染对应的组件；若组件未定义，则报错
    */
  </script>
</body>
</html>